<%@ page import="framework.common.Common" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta charset="utf-8">
    <title>牛皮</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <!-- 引入框架的js、css等 -->
    <jsp:include page="${request.contextPath}/static/include.jsp" flush="true" />
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/modal.css?ver=<%=System.currentTimeMillis()%>" /> <%-- 模态框的css --%>

    <script type="text/javascript">
        //一般直接写在一个js文件中
        layui.use([ 'form', 'layer', 'tree', 'util'], function(){
            var layer = parent.layer === undefined ? layui.layer : top.layer
                ,$ = layui.jquery
                ,form = layui.form
                ,tree = layui.tree
                ,util = layui.util;

            var data =
                [
                    {"name":"百度","title":"百度","id":1,"children":null,"href":null,"spread":true,"checked":true,"disabled":null},
                    {"name":"淘宝","title":"淘宝","id":2,"children":null,"href":null,"spread":true,"checked":true,"disabled":null},
                    {"name":"layui（待开发）","title":"layui（待开发）","id":100000,"children":[
                        {"name":"按钮","title":"按钮","id":101000,"children":null,"href":null,"spread":true,"checked":true,"disabled":null},
                        {"name":"进度条","title":"进度条","id":102000,"children":null,"href":null,"spread":true,"checked":false,"disabled":null},
                        {"name":"表格","title":"表格","id":103000,"children":null,"href":null,"spread":true,"checked":false,"disabled":null}
                    ],"href":null,"spread":true,"checked":false,"disabled":null}
                ]

            //初始化菜单的tree
            $.post(__ctxPath + "/framework/SysRoleMenu.do?method=listMenuTreeFilterByRole", {roleLid: '${param.roleLid}'}, function(response){
                tree.render({
                    elem: '#_MenuTree' //默认是点击节点可进行收缩
                    ,id: '_MenuTree'
                     ,data: response
                    //,data: data
                    ,showCheckbox: true  //是否显示复选框
                    ,onlyIconControl: true  //是否仅允许节点左侧图标控制展开收缩
                });
            }, "json");

            verifyExt(form);
            form.on('submit(*)', function(data){ //form校验成功才会执行下面的代码
                //序列化tree
                var checkArr = new Array();
                var checkedData = tree.getChecked('_MenuTree'); //获取选中节点的数据
                for(var i = 0; i < checkedData.length; i++){
                    var item = {menuLid: checkedData[i].id, roleLid: '${param.roleLid}'};
                    checkArr.push(item);
                    getCheckChild(checkedData[i], checkArr);
                }

                ajax("/framework/SysRoleMenu.do?method=grantMenu", {roleLid: ${param.roleLid}, sysRoleMenuList: JSON.stringify(checkArr)});
                return false; //禁用form表单自带的提交
            });

            function getCheckChild(data, checkArr){
                if(!data) return;
                var children = data.children;
                if(children && children.length > 0){
                    for(var j = 0; j < children.length; j++){
                        var item = {menuLid: children[j].id, roleLid: '${param.roleLid}'};
                        checkArr.push(item);
                    }
                    getCheckChild(children[j], checkArr);
                }
            }
        });

    </script>
</head>

<body class="childBody">
    <form id="bofrom" class="layui-form">
        <div id="_MenuTree" class="demo-tree demo-tree-box"></div>

        <!--隐藏的提交按钮，提供父页面调用  -->
        <div class="layui-form-item" style="display: none;">
            <div class="layui-input-inline">
                <button class="layui-btn form-submit-btn" lay-submit="" lay-filter="*">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</body>
</html>
